<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <div class="box"></div>
    <p></p>
    <ul>
        <li>1</li>
        <li  id="list2">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <ol>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ol>
    </ul>
</body>
<script>
//选择器
//基础，层级，过滤，筛选
</script>
<script>
    //一、基础选择器
    //1.id选择器
    console.log($("#box"));
    //2.类选择器
    console.log($(".box"));
    //3.标签选择器
    console.log($("div"));
    //4.并集选择器，    选择器之间用逗号隔开
    console.log($("#box,.box,p"));
    console.log($("div,p"));
    //5.交集选择器，    
    console.log($("div.box"));
    console.log($("div#box"));



    //二、层级选择器
    //1.子选择器，
    console.log($("ul>li"));
    //2.后代选择器， 用空格隔开
    console.log($("ul li"));


    //三、过滤选择器
    //1.索引选择器，  参数是索引值，从0开始，值不写默认是第一个
    console.log($("li:eq(3)"));
    //获取偶数行
    console.log($("li:odd"));//索引值是奇数的元素
    //获取奇数行
    console.log($("li:even"));//索引值是偶数的元素
    //



    //四、筛选选择器
    //1.children()，获取子元素，
    console.log($('ul').children());//获取ul的子元素
    console.log($('ul').children('li'));//获取ul的子元素中的li
    console.log($('ul').children('li').eq(1));//获取ul的子元素中的li的第二个元素
    //2.find()，获取后代元素， 必须加参数
    console.log($('ul').find('li'));//获取ul的后代元素中的li
    console.log($('ul').find('li').eq(6));//获取ul的后代元素中的li的第7个元素
    //3.siblings()，获取兄弟元素， 兄弟元素你不包括自己。
    console.log($('#list2').siblings());//获取li的兄弟元素
    console.log($('#list2').siblings('li'));//获取li的兄弟元素中的li
    //4.parent()，获取父元素，
    console.log($('#list2').parent());//获取li的父元素
    console.log($('#list2').parent('ul'));//获取li的父元素中的ul
    //5.parents()，获取祖先元素，
    console.log($('#list2').parents());//获取li的祖先元素
    console.log($('#list2').parents('ul'));//获取li的祖先元素中的ul
    console.log($('#list2').parents('li'));//获取li的祖先元素中的li
    //6.next()，获取下一个兄弟元素，
    console.log($('#list2').next());//获取li的下一个兄弟元素
    console.log($('#list2').next('li'));//获取li的下一个兄弟元素中的li
    //7.prev()，获取上一个兄弟元素，
    console.log($('#list2').prev());//获取li的上一个兄弟元素
    //8.nextAll()，获取后面所有的兄弟元素，
    console.log($('#list2').nextAll());//获取li的后面所有的兄弟元素
    console.log($('#list2').nextAll('li'));//获取li的后面所有的兄弟元素中的li
    //9.eq()，获取指定索引的元素，
    console.log($('li').eq(1));//获取li的第2个元素
    //10.index()，获取元素的索引值，
    console.log($('#list2').index());//获取li的索引值
    //11.not()，获取除了指定元素之外的所有元素，
    console.log($('li').not('#list2'));//获取li的除了li的第2个元素之外的所有元素

</script>
</html>